<template>
  <RenderTableColumn v-bind="column" />
</template>

<script setup lang="tsx" name="TableColumn">
import { inject, ref, useSlots } from "vue";
import { TableColumnProps, RenderScope, HeaderRenderScope } from "@/components/KingTable/interface";
import { filterEnum, filterCheckboxEnum, handleProp, handleRowAccordingToProp, hODeepClone } from "@/utils";
import { TableColumnOrFormTypeEnum } from "@/plugins/commonType.enum";
import UploadImg from "@/components/Upload/Img.vue";

defineProps<{ column: TableColumnProps }>();

const slots = useSlots();

const enumMap = inject("enumMap", ref(new Map()));

// 渲染表格数据
const renderCellData = (item: TableColumnProps, scope: RenderScope<any>) => {
  // return enumMap.value.get(item.prop) && item.isFilterEnum
  //   ? filterEnum(handleRowAccordingToProp(scope.row, item.prop!), enumMap.value.get(item.prop)!, item.fieldNames)
  //   : formatValue(handleRowAccordingToProp(scope.row, item.prop!));
  // console.info(">>>>>>>>>>>>>>>>>>>>>>>>" + item.prop + ">>>>>>>>>>>>>>" + item.dictCode);
  if (item.type === TableColumnOrFormTypeEnum.SINGLEIMGCIRCLE) {
    return (
      <UploadImg
        style="display: flex;align-items: center;justify-content: center;"
        v-model:image-url={scope.row[item.prop!]}
        disabled={true}
        drag={false}
        border-radius="50%"
        height="60px"
        width="60px"
      >
        <template>
          <el-icon></el-icon>
          <span>请上传头像</span>
        </template>
      </UploadImg>
    );
  } else if (item.type === TableColumnOrFormTypeEnum.SINGLEIMGSQUARE) {
    return (
      <UploadImg
        style="display: flex;align-items: center;justify-content: center;"
        v-model:image-url={scope.row[item.prop!]}
        disabled={true}
        drag={false}
        height="60px"
        width="60px"
      >
        <template>
          <el-icon></el-icon>
          <span>请上传头像</span>
        </template>
      </UploadImg>
    );
  } else if (item.type === TableColumnOrFormTypeEnum.MULTIPLEIMGS) {
    return "列表暂不支持预览";
    // const colVal = scope.row[item.prop!];
    // console.info("colVal>>>>>>>>>>>>>>>>>>>>>>>>>>", colVal);
    // let colObj = [];
    // if (colVal) {
    //   colObj = JSON.parse(colVal);
    // }
    // const imgUrl = getImgUrl(colObj.length > 0 ? colObj[0].url : "");
    // const imgSrcList = colObj.map((item: any) => {
    //   return getImgUrl(item.url);
    // });
    // return (
    //   <el-image
    //     style="width: 100px; height: 100px"
    //     src={imgUrl}
    //     zoom-rate={1.2}
    //     max-scale="7"
    //     min-scale="0.2"
    //     preview-src-list={imgSrcList}
    //     initial-index={4}
    //     fit="cover"
    //   />
    // );
  } else if (item.type === TableColumnOrFormTypeEnum.MULTIPLEFILES) {
    return "列表暂不支持预览";
  }

  return item.dictCode && enumMap.value.get(item.dictCode)
    ? item.type && item.type == "checkbox"
      ? filterCheckboxEnum(handleRowAccordingToProp(scope.row, item.prop!), enumMap.value.get(item.dictCode)!, item.fieldNames)
      : filterEnum(handleRowAccordingToProp(scope.row, item.prop!), enumMap.value.get(item.dictCode)!, item.fieldNames)
    : handleRowAccordingToProp(scope.row, item.prop!);
};

// 获取 tag 类型
const getTagType = (item: TableColumnProps, scope: RenderScope<any>) => {
  return filterEnum(handleRowAccordingToProp(scope.row, item.prop!), enumMap.value.get(item.prop), item.fieldNames, "tag");
};

// 渲染列
const RenderTableColumn = (item: TableColumnProps) => {
  //item 中属性type=checkbox或radio会在列表中显示，需要排除
  const newItem = hODeepClone(item);
  delete newItem.type;
  return (
    <>
      {item.isShow && (
        <vxe-column
          {...newItem}
          align={item.align ?? "center"}
          field={item.prop}
          title={item.label}
          sortable={!!item.sortable}
          show-overflow={item.overflow}
        >
          {{
            default: (scope: RenderScope<any>) => {
              if (item._children) return item._children.map(child => RenderTableColumn(child));
              if (item.render) return item.render(scope);
              if (slots[handleProp(item.prop!)]) return slots[handleProp(item.prop!)]!(scope);
              if (item.tag) return <el-tag type={getTagType(item, scope)}>{renderCellData(item, scope)}</el-tag>;
              return renderCellData(item, scope);
            },
            header: (scope: HeaderRenderScope<any>) => {
              if (item.headerRender) return item.headerRender(scope);
              if (slots[`${handleProp(item.prop!)}Header`]) return slots[`${handleProp(item.prop!)}Header`]!(scope);
              return item.label;
            }
          }}
        </vxe-column>
      )}
    </>
  );
};
</script>
